<p *ngIf="!availableRoles">Loading user roles...</p>
<app-transfer-lists *ngIf="availableRoles"
                    [source]="availableRoles"
                    [destination]="userRoles"
                    [titlePropertyName]="'name'"
                    [subtitlePropertyName]="'description'"
                    (itemAdded)="addRole($event)"
                    (itemRemoved)="removeRole($event)"
                    [options]="{ 
                        sourceListTitle: 'Available Roles', 
                        emptySourceListMessage: 'There are no available roles to assign.',
                        destinationListTitle: 'Assigned Roles',
                        emptyDestinationListMessage: 'There are no roles assigned to this user.'
                    }"
                    #transferList>
</app-transfer-lists>
<hr />
<div>
    <button type="button"
            class="btn btn-secondary m-r-5 float-right"
            (click)="toggleAdmin()"
            [disabled]="currentUserId === user.id">
        {{ !user.isAdmin ? 'Mark as admin' : 'Remove from admins' }}
    </button>
</div>